<template>
	<el-form ref="formRef" :model="formData" :rules="formRules" label-width="10em">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="分类图标" prop="imgList">
					<el-upload-image v-model="formData.imgList"></el-upload-image>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="formData.name" placeholder="请输入分类名称" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="上级分类" prop="parent_id">
					<el-select v-model="formData.parent_id"></el-select>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="排序" prop="sort">
					<el-input v-model="formData.sort" placeholder="请输入排序号" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="启用状态" prop="status">
					<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">完成{{ current + 1 }}/{{ selection.length }}
			</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
import {
	post
} from "@/assets/js/http.js";

export default {
	name: "goods-type-edit",
	components: {
		ElUploadImage: () => import("@/components/el-upload-image.vue")
	},
	props: {
		selection: {
			type: Array,
			default: () => []
		},
		cateList:Array
	},
	watch: {
		selection() {
			this.setFormData();
		}
	},
	data() {
		return {
			current: 0,
			props: {
				label: "name",
				value: "id",
				children: "children",
				checkStrictly: true
			},
			formData: {
				imgList: [],
				image_id: "",
				name: "",
				sort: "",
				status: 1,
				// parent_id: ""
			},
			formRules: {
				imgList: [{
					required: true,
					message: '请输入',
					trigger: 'change'
				}],
				name: [{
					required: true,
					message: "此项为必填项"
				}],

				sort: [{
					required: true,
					message: "此项为必填项"
				},
				{
					pattern: /^[1-9]\d*$/,
					message: "只能输入正整数"
				}
				],
				status: {
					required: true,
					message: "此项为必填项"
				}
			}
		};
	},
	mounted() {
		this.setFormData();
	},
	methods: {
		setFormData() {
			const data = this.selection[this.current];
			if(!data)return
			this.formData.id = data.id;
			this.formData.imgList = [{ url: data.url, name: data.url }];
			this.formData.name = data.name;
			this.formData.sort = data.sort;
			this.formData.status = data.status;
			// this.formData.parent_id = data.parent_id;
			this.formData.image_id = data.image_id;
		},
		onConfirm() {
			this.$refs.formRef.validate(async isValid => {
				if (isValid) {
					const formData = JSON.parse(JSON.stringify(this.formData));
					// formData.parent_id = formData.parent_id[formData.parent_id.length - 1];
					if (formData.imgList.length > 0) {
						formData.image_id =
							formData.imgList[0].id || formData.image_id;
					}
					await post({
						url: "/admin/store.StoreCate/edit",
						data: formData,
						loading: true,
						successTip: true
					});
					if (this.current === this.selection.length - 1) {
						this.$emit("update");
						this.$parent.$emit("update:visible", false);
						this.$refs.formRef.resetFields();
					} else {
						this.current += 1;
						this.setFormData();
					}
					// this.$emit("update");
					// this.$parent.$emit("update:visible", false);
					// this.$refs.formRef.resetFields();
				}
			});
		},
		onCancel() {
			if (this.current > 0) {
				this.$emit("update");
			}
			this.$parent.$emit("update:visible", false);
			this.$refs.formRef.resetFields();
		}
	}
};
</script>
